Bottom sheets Guidelines 底部彈出層指導規則

Usage 用法

底部表單在手機螢幕上顯示補充內容和操作。

底部工作表是一種多功能的元件，可以包含各種資訊和佈局，包括選單項（列表或網格佈局）、操作和補充內容。

Anatomy 結構

Container  容器

底部彈出層容器用於存放所有相關內容。容器的大小會自動根據內部內容的多少來調整。在所有組成部分中，只有容器是必需的，其他部分都是可選的。

List items (optional)  列表項（可選）

列表是一組連續的文字或影象。列表項可以包括標籤文字、圖示和文字按鈕等元素。

Dividers (optional)  分隔線（可選）

分隔線可用於分隔底部操作表中的相關內容。

Media (optional)  媒體（可選）

Thumbnail  縮圖：底部工作表可以包含頭像或徽標的縮圖。

Image  影象：底部工作表可以包含照片、插圖以及其他圖形，例如天氣圖示。

Video  影片：底部工作表可以包含影片。

Standard bottom sheets 標準底部表單

標準底部工作表可以和螢幕主介面一起使用。你可以同時看到並操作這兩個區域，這在主介面需要經常上下滑動時特別有用。它主要用來顯示輔助資訊，比如在音樂APP中顯示正在播放的音樂控制面板。

當底部工作表展開到全屏時，它的頂部會顯示一個向下摺疊的圖示，點選可以回到原來的位置。底部工作表還可以顯示一些額外的內容，這些內容會延伸到螢幕下方。比如說，在地圖應用中，你可以在地圖下方看到詳細的位置資訊。

Modal bottom sheets 模態底部表單

與對話方塊類似，模態底部工作表出現在應用內容前方，在它們出現時禁用所有其他應用功能，並保持在螢幕上直到被確認、關閉或完成了所需的操作。

在移動端，將模態底部工作表用作內聯選單或簡單對話方塊的替代方案，特別是當提供一長串操作項時，或者當專案需要更長的描述和圖示時。模態底部工作表僅在移動應用程式中使用。

Visibility  可見性

模態底部工作表首次開啟時最多隻會佔據螢幕高度的50%，這樣使用者可以方便地操作頂部的功能。

如果工作表的內容比較多，超過了螢幕50%的高度，使用者可以向上拉動檢視全部內容，並在內容區域內上下滾動。

模態底頁在使用者執行操作（如點選按鈕或溢位圖示）觸發時出現。可以透過以下方式將其關閉：

• 點選底頁內的選單項或操作項

• 點選遮罩層

• 向下滑動底頁

• 如果底頁頂部應用欄中有關閉提示，可使用它關閉

在全屏模態底片中顯示關閉功能。

Responsive layout 響應式佈局

Compact window size 緊湊視窗尺寸

在緊湊的視窗大小中，例如移動裝置，底部工作表延伸至螢幕寬度，並高於主要內容。

Medium and expanded window sizes中等和擴充套件視窗大小

對於中等和擴充套件視窗尺寸，底部工作表設有預設最大寬度以保持佈局美觀。此設定可根據需要調整。複雜任務建議使用懸浮工作表等非瞬態介面。

在較大的展開視窗大小中，例如桌面，底部工作表可以替換為顯示類似內容的一側工作表。

Behavior 行為

底頁可展開至完全展開狀態，在摺疊和展開狀態間切換。這樣可預測底頁佔用空間，且可透過系統或使用者控制。

Custom positioning  自定義定位

可透過拖動手柄調整底部工作表高度，支援預設高度間切換和快速關閉。點選拖動手柄可在預設高度間切換或關閉，點選遮罩層則直接關閉。對於多預設高度但不支援拖動的工作表，需提供單指標操作方案來調整高度。

Scrolling  滾動

底部工作表可以獨立於螢幕其他內容水平滾動。

Back  返回

在 Android 系統中，有一個稱為預測性返回的手勢，允許使用者在底部工作表上向左或向右滑動。

• 底部工作表從螢幕的左右邊緣分離，表示它將關閉。

• 上一螢幕在預覽中顯示

Interaction & style 互動與樣式

Touch target area 觸控目標區域

如果底部彈出層可以調整大小，並且有拖動把手，使用者可以在頂部48dp的區域進行操作和拖動。

可選的拖動手柄可以在 tab 順序中獲得焦點，並可透過非觸控輸入（如鍵盤或開關控制元件）進行互動。